<template>
  <div @click="choose">
    <div v-if="isActive"><slot name="ico_active"></slot></div>    <!-- 建议给slot外部包装div，以便容纳插槽属性 -->
    <div v-else><slot name="ico"></slot></div>
    <div :style="isActiveColor">
      <slot name="text"></slot>    <!-- 不要给插槽赋值class，因为它会被外界插入元素替代 -->
    </div>
  </div>
</template>

<script>
  export default{
    name:'BarItem',
    props:{
      path:{
        type:String,
        default:'',
        require:true
      },
      activeColor:{
        type:String,
        default:'red'
      }
    },
    data(){
      return {

      }
    },
    computed:{
      isActive(){
        return this.$route.path.indexOf(this.path)!==-1
      },
      isActiveColor(){
        return this.isActive?{color:this.activeColor}:{}    //实现动态颜色彻底封装,由app传入颜色
      }
    },
    methods:{
      choose(){
        this.$router.push(this.path)
      }
    }
  }
</script>

<style scoped>
  template>div{   /* ??? */
    flex:1;
    text-align: center;
    height: 49px;
  }

</style>
